<template>
  <div>
  
    <div v-if="swiperShow" class="panel" >
        <swiper  v-if="swiper_list.length"  :list="swiper_list" :show-dots="false" style="border: 4px solid #fff !important;" ></swiper>
        <p class="close"><x-icon type="ios-close" size="38" class="icon-red" @click.passive="closeSwiper"></x-icon></p>
    </div>
    <ul id="elasticstack" class="elasticstack" > 
        <!-- <li v-for="(imgUrl,key) of imglist" :key="key"><img :src="imgUrl"/></li> -->
        <swiper v-if="swiper_list.length"  :list="swiper_list" :show-dots="false" :aspect-ratio="240/240"  style="margin:0 auto;"  ></swiper>
          <span class="scale"  @click.passive="showswiper_list"></span>
    </ul>
    <p class="pic-total">共{{swiper_list.length}}张</p>
  </div>
</template>
<script>
import {
  getServerHost,
  preventMove,
  GetRequest,
  checkMobile,
  checkQq} from '@/assets/lib/tool.js'
import { Swiper } from 'vux'
export default {
  name: 'drag',
  components: { Swiper },
  props: {
    imglist: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      swiper_list: [],
      swiperShow: false,

    }
  },
  watch: {

  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.dragimg();
      }, 500)
      // document.body.removeEventListener('touchmove', preventMove, {
      //   passive: false
      // });
    })

  },
  methods: {
    dragimg() {
      var vm = this;
      let arry = [];
      this.swiper_list = [];
      this.imglist.map((items) => {
        //console.log(items);
        vm.swiper_list.push({
          url: 'javascript:',
          img: items,
          title: ''
        })
      })
    },
    showswiper_list() {
      // var vm = this;
      // let arry = [];
      // this.swiper_list = [];
      // this.imglist.map((items) => {
      //   //console.log(items);
      //   vm.swiper_list.push({
      //     url: 'javascript:',
      //     img: items,
      //     title: ''
      //   })
      // })
      this.swiperShow = true;
    },
    closeSwiper() {
      this.swiperShow = false;
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../assets/lib/drag/css/demo.css";
@import "../../assets/lib/drag/css/component.css";
@import "../../assets/style/formreset.css";

.scale {
  position: absolute;
  top: 2.13rem;
  left: 2rem;
  display: inline-block;
  width: 40px;
  height: 38px;
  background: url("../../assets/img/scale.png") no-repeat;
  background-size: 100% 100%;
  z-index: 777;
}
.pic-total {
  color: #b0b0b0;
  font-size: 18px;
}
.panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 888;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
  .vux-slider {
    top: 10%;
  }
  .close {
    position: relative;
    top: 15%;
  }
}
.elasticstack {
  padding-top: 20px;
  li {
    width: 240px;
    height: 240px;
    img {
      width: 100%;
      border: 4px solid #fff;
    }
  }
}
</style>
